import React, { Component } from 'react'
import { Icon, Popover } from 'antd'

export default class TopHeader extends Component {
  constructor() {
    super()
    this.state = {
      selectedItem: 'index',
    }
  }
  render() {
    const { selectedItem } = this.state
    const text = (
      <div className="rt-above-box">
        <div>
          <i className="iconfont icon-user"></i>
          {' '}
          <span>账户信息</span>
        </div>
        <div className="rt-unread-msg">
          <i className="iconfont icon-information"></i>
          {' '}
          <span>未读消息</span>
          <span className="rt-num">2</span>
        </div>
        <div>
          <i className="iconfont icon-order"></i>
          {' '}
          <span>任务管理</span>
        </div>
        <div>
          <i className="iconfont icon-setting"></i>
          {' '}
          <span>系统设置</span>
        </div>
      </div>
    )
    const content = (
      <div>
        <i className="iconfont icon-signout"></i>
        {' '}
        <span>退出登录</span>
      </div>
    )
    return (
      <div className="rt-top-header">
        <div className="rt-logo">
          <img src="/images/logo.png" />
          <Icon type="bars" />
        </div>
        <div className="rt-banner">
          {/*<div className="rt-banner-title">
            <div
              className={`${selectedItem === 'index' ? 'rt-banner-title-text' : ''}`}
              onClick={() => {
                if (selectedItem === 'index') return
                this.setState({
                  selectedItem: 'index',
                })
              }}
            >
              <i className="iconfont icon-home"></i> <span>首页</span>
            </div>
            <div className="rt-vertical-line"></div>
            <div
              className={`${selectedItem === 'func' ? 'rt-banner-title-text' : ''}`}
              onClick={() => {
                if (selectedItem === 'func') return
                this.setState({
                  selectedItem: 'func',
                })
              }}
            >
              <i className="iconfont icon-function"></i> <span>功能</span>
            </div>
            <div className="rt-vertical-line"></div>
            <div
              className={`${selectedItem === 'data' ? 'rt-banner-title-text' : ''}`}
              onClick={() => {
                if (selectedItem === 'data') return
                this.setState({
                  selectedItem: 'data',
                })
              }}
            >
              <i className="iconfont icon-data"></i> <span>数据</span>
            </div>
            <div className="rt-vertical-line"></div>
            <div
              className={`${selectedItem === 'config' ? 'rt-banner-title-text' : ''}`}
              onClick={() => {
                if (selectedItem === 'config') return
                this.setState({
                  selectedItem: 'config',
                })
              }}
            >
              <i className="iconfont icon-configure"></i> <span>配置</span>
            </div>
          </div>*/}
          <div className="rt-placeholder"></div>
        </div>
        <div className="rt-user-info">
          <div className="rt-circle"></div>
            <div className="rt-description">
              <div className="rt-desc-text">
                <span>1071766012@qq.com</span>
                <Popover className={`rt-popover-card`} placement="bottomRight" title={text} content={content} trigger="click">
                <span>
                  职位：销售总监
                  <span className={`rt-solid-circle`}>
                  </span>
                </span>
              </Popover>
              </div>
              <i className="iconfont icon-arrow rt-icon-color"></i>
            </div>
        </div>
      </div>
    )
  }
}